<template>
  <div id="search">
    <div class="searchbar">
      <van-icon
        class="arrow-left"
        name="arrow-left"
        size="30"
        color="#ffffff"
        @click="backHome"
      />
      <input
        v-model="val"
        type="text"
        class="iconfont"
        :placeholder="'\ue622 周末吃烤肉'"
        @keyup.enter="onSearch"
      />
    </div>
    <div class="search-main">
      <div class="search-list">
        <div class="title">
          <div>历史搜索</div>
          <van-icon name="delete-o" size="20" @click="deleteSearch" />
        </div>
        <div class="list">
          <div v-for="(l, index) in searchList" :key="index">
            <div class="list-title" v-if="fn(index)">
              {{ l }}
            </div>
          </div>
          <van-icon
            name="arrow-down"
            size="30"
            @click="showAll"
            v-show="!isShow && searchList.length > 9"
          />
          <van-icon
            name="arrow-up"
            size="30"
            @click="showAll"
            v-show="isShow && searchList.length > 9"
          />
        </div>
      </div>
      <div class="rank">
        <div class="rank-title">
          人气爆款排行榜&nbsp;&nbsp;
          <van-icon name="arrow" size="20" />
        </div>
        <ul class="rank-main">
          <li v-for="g in goodslist" :key="g.id">
            <img :src="g.url" alt="" />
            <div class="right">
              <div class="name">
                <div class="one">{{ g.name }}</div>
                <div class="two">{{ g.user }}已下单</div>
              </div>
              <div class="price">
                <div class="searchPrice">￥{{ g.price }}</div>
                <div class="searchIcon">
                  <van-icon name="shopping-cart-o" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      val: "",
      isShow: false,
    };
  },
  computed: {
    ...mapState(["goodslist", "searchList"]),
  },
  methods: {
    deleteSearch() {
      this.$store.commit("deleteSearch");
    },
    backHome() {
      this.$router.push("/home");
    },
    onSearch() {
      this.$store.commit("inSearch", this.val);
      this.val = "";
    },
    fn(index) {
      if (index < 9) {
        return true;
      } else {
        return this.isShow;
      }
    },
    showAll() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/var.less";
@import "../../assets/font-search/iconfont.css";
#search {
  height: 100%;
  .searchbar {
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    height: 88px;
    background: @c;
    padding: 0 20px;
    display: flex;
    align-items: center;
    input {
      width: 685px;
      height: 58px;
      background: #ffffff;
      border-radius: 29px;
      border: none;
      padding: 0 40px;
      font-size: 26px;
      margin-left: 20px;
      &::placeholder {
        color: #d1d1d1;
        font-size: 30px;
        margin-left: 100px;
        text-align: center;
      }
    }
  }
  .search-main {
    height: 100%;
    width: 100%;
    padding: 88px 42px 0 42px;
    background: #fff;
    overflow: auto;
    .title {
      .flex-sb();
      font-size: 40px;
      font-weight: 500;
      color: #646464;
      padding: 38px 0;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      font-size: 30px;
      color: #969696;
      .list-title {
        width: 90px;
        margin-right: 55px;
        line-height: 2;
        .line1();
      }
    }
    .rank {
      .rank-title {
        padding: 38px 0;
        font-size: 40px;
        font-weight: 500;
        color: #646464;
        display: flex;
        align-items: center;
      }
      .rank-main {
        li {
          display: flex;
          margin-bottom: 10px;
          img {
            width: 110px;
            height: 110px;
          }
          .right {
            margin-left: 16px;
            .name {
              display: flex;
              justify-content: space-between;
              .one {
                height: 30px;
                font-size: 30px;
                font-weight: 500;
                color: #646464;
              }
              .two {
                width: 147px;
                font-size: 22px;
                font-weight: 500;
                color: #909090;
                margin-right: 88px;
                .line1();
              }
            }
            .price {
              width: 650px;
              display: flex;
              justify-content: space-between;
              .searchPrice {
                width: 82px;
                height: 24px;
                margin-top: 38px;
                font-size: 22px;
                font-weight: 500;
                color: #ff5b5b;
              }
              .searchIcon {
                width: 44px;
                height: 44px;
                margin-right: 89px;
                line-height: 44px;
                text-align: center;
                background: #ffcc00;
                border-radius: 16px;
                font-size: 30px;
                color: white;
              }
            }
          }
        }
      }
    }
  }
}
</style>
